<template>
  <div class="reportMeanStatistical">
    <div class="reportMeanStatistical_treeBg">
      <MetaTreeList title-size="20" title="设备" :icon="treeIcon" :default-props="defaultProps" :tree-data="equTreeData" @treeItemChoose="roloeItemChoose"></MetaTreeList>
    </div>
    <div class="reportMeanStatistical_infoBg">
      <div v-if="Object.keys(roleInfoItem).length > 0" class="reportMeanStatistical_info">
        <div class="reportMeanStatistical_summaryBg">
          <div class="reportMeanStatistical_summaryTitleArea">
            <div class="reportMeanStatistical_summaryTitle">本日</div>
            <div class="reportMeanStatistical_summarySubtitle">均值</div>
          </div>
          <div class="reportMeanStatistical_summaryValidDataArea">
            <div class="reportMeanStatistical_summaryValidDataTitle">有效数据</div>
            <div class="reportMeanStatistical_summaryValidData">
              <span class="reportMeanStatistical_summaryValidDataValue">{{daySumNum}}</span>
              <span class="reportMeanStatistical_summaryValidDataUnit">条</span>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamArea" :style="dayMeanList.length > 10 && !dayMeanMoreFlag ? 'overflow:hidden;height: 126px' : ''">
            <div class="reportMeanStatisticalSummary_paramItemBg" v-for="item in dayMeanList" :key="item.id">
              <div class="reportMeanStatisticalSummaryParam_name">{{item.paramName}}</div>
              <div class="reportMeanStatisticalSummaryParam_value">{{parseFloat(item.aver).toFixed(item.reserved)}} {{item.unit}}</div>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamOpenArea" @click="doCheckMore('day')">
            <i v-if="dayMeanList.length > 10" :class="!dayMeanMoreFlag ? 'el-icon-caret-bottom reportMeanStatistical_summaryParamOpenIcon' : 'el-icon-caret-top reportMeanStatistical_summaryParamOpenIcon'"></i>
            <div v-if="dayMeanList.length > 10" class="reportMeanStatistical_summaryParamOpenText">{{!dayMeanMoreFlag ? '展开' : '折叠'}}</div>
          </div>
        </div>
        <div class="reportMeanStatistical_summaryBg">
          <div class="reportMeanStatistical_summaryTitleArea">
            <div class="reportMeanStatistical_summaryTitle">本周</div>
            <div class="reportMeanStatistical_summarySubtitle">均值</div>
          </div>
          <div class="reportMeanStatistical_summaryValidDataArea">
            <div class="reportMeanStatistical_summaryValidDataTitle">有效数据</div>
            <div class="reportMeanStatistical_summaryValidData">
              <span class="reportMeanStatistical_summaryValidDataValue">{{weekSumNum}}</span>
              <span class="reportMeanStatistical_summaryValidDataUnit">条</span>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamArea" :style="weekMeanList.length > 10 && !weekMeanMoreFlag ? 'overflow:hidden;height: 126px' : ''">
            <div class="reportMeanStatisticalSummary_paramItemBg" v-for="item in weekMeanList" :key="item.id">
              <div class="reportMeanStatisticalSummaryParam_name">{{item.paramName}}</div>
              <div class="reportMeanStatisticalSummaryParam_value">{{parseFloat(item.aver).toFixed(item.reserved)}} {{item.unit}}</div>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamOpenArea" @click="doCheckMore('week')">
            <i v-if="weekMeanList.length > 10" :class="!weekMeanMoreFlag ? 'el-icon-caret-bottom reportMeanStatistical_summaryParamOpenIcon' : 'el-icon-caret-top reportMeanStatistical_summaryParamOpenIcon'"></i>
            <div v-if="weekMeanList.length > 10" class="reportMeanStatistical_summaryParamOpenText">{{!weekMeanMoreFlag ? '展开' : '折叠'}}</div>
          </div>
        </div>
        <div class="reportMeanStatistical_summaryBg">
          <div class="reportMeanStatistical_summaryTitleArea">
            <div class="reportMeanStatistical_summaryTitle">本月</div>
            <div class="reportMeanStatistical_summarySubtitle">均值</div>
          </div>
          <div class="reportMeanStatistical_summaryValidDataArea">
            <div class="reportMeanStatistical_summaryValidDataTitle">有效数据</div>
            <div class="reportMeanStatistical_summaryValidData">
              <span class="reportMeanStatistical_summaryValidDataValue">{{monthSumNum}}</span>
              <span class="reportMeanStatistical_summaryValidDataUnit">条</span>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamArea" :style="monthMeanList.length > 10 && !monthMeanMoreFlag ? 'overflow:hidden;height: 126px' : ''">
            <div class="reportMeanStatisticalSummary_paramItemBg" v-for="item in monthMeanList" :key="item.id">
              <div class="reportMeanStatisticalSummaryParam_name">{{item.paramName}}</div>
              <div class="reportMeanStatisticalSummaryParam_value">{{parseFloat(item.aver).toFixed(item.reserved)}} {{item.unit}}</div>
            </div>
          </div>
          <div class="reportMeanStatistical_summaryParamOpenArea" @click="doCheckMore('month')">
            <i v-if="monthMeanList.length > 10" :class="!monthMeanMoreFlag ? 'el-icon-caret-bottom reportMeanStatistical_summaryParamOpenIcon' : 'el-icon-caret-top reportMeanStatistical_summaryParamOpenIcon'"></i>
            <div v-if="monthMeanList.length > 10" class="reportMeanStatistical_summaryParamOpenText">{{!monthMeanMoreFlag ? '展开' : '折叠'}}</div>
          </div>
        </div>
        <div class="reportMeanStatistical_searchArea">
          <div class="reportMeanStatisticalSearch_half">
            <div class="reportMeanStatisticalSearch_title">时间区间</div> 
            <el-date-picker
              v-model="monthDataBetween"
              type="monthrange"
              value-format="yyyy-MM"
              @change="changeSearchTime()"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </div>
          <div class="reportMeanStatisticalSearch_half">
            <div class="reportMeanStatisticalSearch_conditionBg">
              <div :class="searchDataType === 'month' ? 'reportMeanStatisticalSearch_conditionItem conditionOnChoose' : 'reportMeanStatisticalSearch_conditionItem'" @click="changeDataType('month')">月均值</div>
              <div :class="searchDataType === 'week' ? 'reportMeanStatisticalSearch_conditionItem conditionOnChoose' : 'reportMeanStatisticalSearch_conditionItem'" @click="changeDataType('week')">周均值</div>
              <div :class="searchDataType === 'day' ? 'reportMeanStatisticalSearch_conditionItem conditionOnChoose' : 'reportMeanStatisticalSearch_conditionItem'" @click="changeDataType('day')">日均值</div>
            </div>
          </div>
        </div>
        <div class="reportMeanStatistical_tableTitleArea">
          <div class="reportMeanStatistical_tableTitle">{{ roleInfoItem.customizeName ? roleInfoItem.customizeName : roleInfoItem.pointName }} 均值报表</div>
          <div class="reportMeanStatistical_tableBtnGroup">
            <div class="reportMeanStatistical_conditionBg">
              <div :class="tableDataType === 'datas' ? 'reportMeanStatistical_conditionItem conditionOnChoose' : 'reportMeanStatistical_conditionItem'" @click="changeTableDataType('datas')">数据</div>
              <div :class="tableDataType === 'charts' ? 'reportMeanStatistical_conditionItem conditionOnChoose' : 'reportMeanStatistical_conditionItem'" @click="changeTableDataType('charts')">曲线</div>
            </div>
            <el-button @click="exportDatas">导出</el-button>
          </div>
        </div>
        <el-table
          v-if="tableDataType === 'datas'"
          :data="meanTableData"
          height="500"
          header-cell-class-name="tableHeader"
          style="width: 100%">
          <template v-if="searchDataType === 'day'">
            <el-table-column
              prop="paramName"
              label="指标"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column :label="item.yearMonth" v-for="item in tableTitleList.yearMonthDays" :key="item.yearMonth" align="center">
              <el-table-column v-for="dayItem in item.days" :key="dayItem.day"
                :prop="item.yearMonth + '-' + dayItem.day"
                align="center"
                :label="dayItem.dayText">
              </el-table-column>
            </el-table-column>
          </template>
          <template v-else-if="searchDataType === 'week'">
            <el-table-column
              prop="paramName"
              label="指标"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column :label="item.year" v-for="item in tableTitleList.yearWeeks" :key="item.year" align="center">
              <el-table-column v-for="weekItem in item.week" :key="weekItem.week"
                align="center"
                :prop="item.year + '-' + weekItem.week"
                :label="weekItem.weekText">
              </el-table-column>
            </el-table-column>
          </template>
          <template v-else-if="searchDataType === 'month'">
            <el-table-column
              prop="paramName"
              align="center"
              label="指标"
              width="150">
            </el-table-column>
            <el-table-column :label="item.year" v-for="item in tableTitleList.yearMonths" :key="item.year" align="center">
              <el-table-column v-for="monthItem in item.month" :key="monthItem.month"
                :prop="item.year + '-' + monthItem.month"
                align="center"
                :label="monthItem.monthText">
              </el-table-column>
            </el-table-column>
          </template>
        </el-table>
        <div v-else-if="tableDataType === 'charts'" class="reportMeanStatistical_chartsArea">
          <div id="reportMeanStatistical_charts" class="reportMeanStatistical_charts"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import MetaTreeList from '../components/MetaTreeList'
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'reportMeanStatistical',
  components: {
    MetaTreeList
  },
  data () {
    return {
      treeIcon: require("@/assets/images/v3/equipmentTreeIcon.png"),
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      equTreeData: [],
      roleInfoItem: {},
      dayMeanList: [],
      daySumNum: '',
      dayMeanMoreFlag: false,
      weekMeanList: [],
      weekSumNum: '',
      weekMeanMoreFlag: false,
      monthMeanList: [],
      monthSumNum: '',
      monthMeanMoreFlag: false,
      monthDataBetween: [],
      searchDataType: 'month',
      tableDataType: 'datas',
      tableTitleList: {},
      meanTableData: [],
      meanStatisticalDatas: [],
      meanDataCharts: null
    }
  },
  mounted() {
    this.initEquipmentData()
  },
  methods: {
    initEquipmentData() {
      //点位默认选中 Ray
      let pointId = localStorage.getItem('dataCenterEquipmentId')
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "pointEquipment/userAreaPoint",
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result
          let currentDataItem = {}
          for(let i in this.equTreeData) {
            this.equTreeData[i].name = "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name
            this.equTreeData[i].level = 1
            for(let j in this.equTreeData[i].list) {
              if(this.equTreeData[i].list[j].customizeName && this.equTreeData[i].list[j].customizeName !== '') {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].customizeName
              }else {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].pointName
              }
              this.equTreeData[i].list[j].level = 2

              //点位默认选中 Ray
              if(pointId === this.equTreeData[i].list[j].id) {
                currentDataItem = this.equTreeData[i].list[j]
              }
            }
          }
          //点位默认选中 Ray
          if(Object.keys(currentDataItem).length > 0) {
            this.roloeItemChoose(currentDataItem)
          }

        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getMeanDatas() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "reflectivity/getDeviceAverageData",
        method: "get",
        params: {
          id: this.roleInfoItem.id,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.dayMeanList = []
          this.weekMeanList = []
          this.monthMeanList = []
          this.daySumNum = ''
          this.weekSumNum = ''
          this.monthSumNum = ''
          if(res.data.result) {
            this.daySumNum = res.data.result.day && res.data.result.day.dataNum ? res.data.result.day.dataNum : 0
            this.weekSumNum = res.data.result.week && res.data.result.week.dataNum ? res.data.result.week.dataNum : 0
            this.monthSumNum = res.data.result.month && res.data.result.month.dataNum ? res.data.result.month.dataNum : 0

            this.dayMeanList = res.data.result.day && res.data.result.day.averList ? res.data.result.day.averList : []
            this.weekMeanList = res.data.result.week && res.data.result.week.averList ? res.data.result.week.averList : []
            this.monthMeanList = res.data.result.month && res.data.result.month.averList ? res.data.result.month.averList : []
          }

        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    roloeItemChoose(item) {
      if(item.level === 1) {
        return
      }
      this.roleInfoItem = {}
      this.$nextTick(() => {
        this.roleInfoItem = deepClone(item)
        //点位选中 Ray
        localStorage.setItem('dataCenterEquipmentId',this.roleInfoItem.id)

        this.getMeanDatas()

        this.monthDataBetween = []
        let date = new Date()
        let end = date
        let start = new Date(date.getTime() - (6 * 30 * 24 * 60 * 60 * 1000))
        let startDate = utils.formatDate('yyyy-MM', start)
        let endDate = utils.formatDate('yyyy-MM', end)
        this.monthDataBetween.push(startDate)
        this.monthDataBetween.push(endDate)

        this.searchDataType = 'month'
        this.tableDataType = 'datas'
        this.changeSearchTime()

      })
    },
    getAverBottomDatas(callback) {
      let type = 'M'
      if(this.searchDataType == 'month') {
        type = 'M'
      }else if(this.searchDataType == 'week') {
        type = 'W'
      }else if(this.searchDataType == 'day') {
        type = 'D'
      }
      let endDate = new Date(this.monthDataBetween[1])
      let endDay = utils.getMonthDays(endDate.getFullYear(),endDate.getMonth() + 1)
      this.meanTableData = []
      this.meanStatisticalDatas = []
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "reflectivity/getAverageDataForType",
        method: "get",
        params: {
          type: type,
          id: this.roleInfoItem.id,
          start: this.monthDataBetween[0] + '-01 00:00:00',
          end: this.monthDataBetween[1] + '-' + endDay + ' 23:59:59'
        }
      }).then(res => {
        if (res.data.code === 200) {
          if(res.data.result) {
            for(let key in res.data.result) {
              let keyDatas = res.data.result[key]
              if(keyDatas.length > 0) {
                let item = {}
                let sDataItem = {}
                sDataItem.paramName = keyDatas[0].paramName
                sDataItem.paramKey = keyDatas[0].paramKey
                sDataItem.dataList = []
                for(let i in keyDatas) {
                  if(i == '0') {
                    item.paramName = keyDatas[i].paramName
                  }
                  item[keyDatas[i].time] = parseFloat(keyDatas[i].aver).toFixed(keyDatas[i].reserved)

                  let averItem = {}
                  averItem.aver = parseFloat(keyDatas[i].aver).toFixed(keyDatas[i].reserved)
                  averItem.time = keyDatas[i].time
                  sDataItem.dataList.push(averItem)
                }
                this.meanStatisticalDatas.push(sDataItem)
                this.meanTableData.push(item)
              }
            }
          }
          if(callback && typeof callback === 'function') {
            callback()
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    doCheckMore(key) {
      if(key === 'day') {
        this.dayMeanMoreFlag = !this.dayMeanMoreFlag
      }else if(key === 'week') {
        this.weekMeanMoreFlag = !this.weekMeanMoreFlag
      }else if(key === 'month') {
        this.monthMeanMoreFlag = !this.monthMeanMoreFlag
      }
    },
    changeDataType(type) {
      if(this.searchDataType !== type) {
        this.searchDataType = type
        this.getAverBottomDatas(() => {
          if(this.tableDataType === 'charts') {
            this.$nextTick(() => {
              this.drawMeanChart()
            })
          }
        })
      }
    },
    changeTableDataType(type) {
      if(this.tableDataType !== type) {
        this.tableDataType = type
        this.$nextTick(() => {
          this.drawMeanChart()
        })
      }
    },
    exportDatas() {
      let type = 'M'
      let excelTitle = this.monthDataBetween[0] + '至' + this.monthDataBetween[1]
      if(this.searchDataType == 'month') {
        type = 'M'
        excelTitle += '月'
      }else if(this.searchDataType == 'week') {
        type = 'W'
        excelTitle += '周'
      }else if(this.searchDataType == 'day') {
        type = 'D'
        excelTitle += '日'
      }

      let endDate = new Date(this.monthDataBetween[1])
      let endDay = utils.getMonthDays(endDate.getFullYear(),endDate.getMonth() + 1)
      let params = {
        type: type,
        id: this.roleInfoItem.id,
        start: this.monthDataBetween[0] + '-01 00:00:00',
        end: this.monthDataBetween[1] + '-' + endDay + ' 23:59:59'
      }

      let token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: process.env.PROGOO_GATE_WATER + "reflectivity/exportAverageDataForType",
        params: params,
        // token
        headers: {
          "x-auth-token": token,
        },
        responseType: "blob",
      }).then((res) => {
        if (res.data.code && res.data.code == 400) {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
          return;
        }
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute(
          "download", excelTitle + "均值统计报表.xlsx"
        );
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    drawMeanChart() {
      let xDatas = []
      let yDatas = []

      if(this.searchDataType === 'month') {
        for(let i in this.tableTitleList.yearMonths) {
          let ymItem = this.tableTitleList.yearMonths[i]
          for(let j in ymItem.month) {
            xDatas.push(ymItem.year + '-' + ymItem.month[j].month)
          }
        }
      }else if(this.searchDataType === 'week') {
        for(let i in this.tableTitleList.yearWeeks) {
          let ywItem = this.tableTitleList.yearWeeks[i]
          for(let j in ywItem.week) {
            xDatas.push(ywItem.year + '-' + ywItem.week[j].week)
          }
        }
      }else if(this.searchDataType === 'day') {
        for(let i in this.tableTitleList.yearMonthDays) {
          let ymdItem = this.tableTitleList.yearMonthDays[i]
          for(let j in ymdItem.days) {
            xDatas.push(ymdItem.yearMonth + '-' + ymdItem.days[j].day)
          }
        }
      }
      let legendList = []
      for(let i in this.meanStatisticalDatas) {
        let itemYDatas = []
        for(let j in this.meanStatisticalDatas[i].dataList) {
          let eachItem = []
          eachItem.push(this.meanStatisticalDatas[i].dataList[j].time)
          eachItem.push(this.meanStatisticalDatas[i].dataList[j].aver)
          itemYDatas.push(eachItem)
        }
        legendList.push(this.meanStatisticalDatas[i].paramName)
        let item = {
          name: this.meanStatisticalDatas[i].paramName,
          type: 'line',
          stack: '总量',
          smooth: true,
          data: itemYDatas,
          // areaStyle: {
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //     offset: 0,
          //     color: 'rgba(248,208,137,0.3)'
          //   }, {
          //     offset: 1,
          //     color: '#F8D089'
          //   }])
          // },
        }
        yDatas.push(item)
      }

      let echarts = require('echarts')
      let charts = document.getElementById('reportMeanStatistical_charts')
      if(!charts) {
        return
      }

      this.meanDataCharts = echarts.init(charts)
      this.meanDataCharts.setOption({
        legend: {
          data: legendList,
          selectedMode: 'single',
          top: 10,
          width: '90%',
          left: '5%'
        },
        color: ['#F28F9B'],
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: {
          type: 'inside'
        },
        grid: {
          left: '6%',
          bottom: '7%',
          top: '18%',
          height: '70%',
          right: '2%',
          show: true,
          // backgroundColor: '#002738'
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#DFEAFA',
            }
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: '#000',
            },
          },
          boundaryGap: false,
          data: xDatas,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#DFEAFA'
            }
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: '#000',
            },
          },
          splitLine: {
            lineStyle: {
                color: ['#DFEAFA']
            }
          },
          scale:true
        },
        series: yDatas
      })

      this.$nextTick(() => {
        this.meanDataCharts.resize()
      })
    },
    changeSearchTime() {
      let startYear = parseInt(utils.getStrByUnderlineBefore(this.monthDataBetween[0], '-'))
      let endYear = parseInt(utils.getStrByUnderlineBefore(this.monthDataBetween[1], '-'))

      let startMonth = parseInt(utils.getStrByUnderlineAfter(this.monthDataBetween[0], '-'))
      let endMonth = parseInt(utils.getStrByUnderlineAfter(this.monthDataBetween[1], '-'))

      let now = new Date()
      let nowYear = now.getFullYear()
      let nowMonth = now.getMonth() + 1
      let nowDay = now.getDate()

      let hasDays = utils.getMonthDays(endYear,endMonth)
      let startWeek = utils.getWeekNumber(startYear, startMonth, 1)
      let endWeek = utils.getWeekNumber(endYear, endMonth, hasDays)

      let dYear = endYear - startYear
      this.tableTitleList = {}
      //年-月
      this.tableTitleList.yearMonths = []
      //年-周
      this.tableTitleList.yearWeeks = []
      //年月-日
      this.tableTitleList.yearMonthDays = []

      for(let i = 0; i <= dYear; i++) {
        let yearItem = {}
        yearItem.year = startYear + i + ''
        yearItem.month = []

        let ywItem = {}
        ywItem.year = startYear + i + ''
        ywItem.week = []

        if(i === 0) {
          let dMonth = endMonth - startMonth
          let dWeek = endWeek - startWeek

          if(dYear > 0) {
            dMonth = 12 - startMonth

            let eWeek = utils.getWeekNumber(startYear, 12, 31)
            dWeek = eWeek - startWeek
          }
          for(let j = 0; j <= dMonth ;j++) {
            let m = (startMonth + j) >= 10 ? (startMonth + j) + '' : '0' + (startMonth + j)
            let monthItem = {}
            monthItem.month = m
            monthItem.monthText = m + '月'
            yearItem.month.push(monthItem)

            let ymItem = {}
            ymItem.yearMonth = (startYear + i) + '-' + m
            ymItem.days = []
            let monthDayLen = utils.getMonthDays(startYear + i, startMonth + j)
            if(nowYear == startYear + i && nowMonth == startMonth + j) {
              monthDayLen = nowDay
            }
            for(let k = 1;k <= monthDayLen;k++) {
              let d = k >= 10 ? k + '' : '0' + k
              let dayItem = {}
              dayItem.day = d
              dayItem.dayText = d + '日'
              ymItem.days.push(dayItem)
            }
            this.tableTitleList.yearMonthDays.push(ymItem)
          }
          this.tableTitleList.yearMonths.push(yearItem)

          for(let j = 0; j <= dWeek; j++) {
            let w = (startWeek + j) >= 10 ? (startWeek + j) + '' : '0' + (startWeek + j)
            let weekItem = {}
            weekItem.week = w
            weekItem.weekText = '第' + w + '周'
            ywItem.week.push(weekItem)
          }
          this.tableTitleList.yearWeeks.push(ywItem)

        }else if(i > 0 && i < dYear) {
          for(let j = 1; j <= 12 ;j++) {
            let m = j >= 10 ? j + '' : '0' + j
            let monthItem = {}
            monthItem.month = m
            monthItem.monthText = m + '月'
            yearItem.month.push(monthItem)

            let ymItem = {}
            ymItem.yearMonth = (startYear + i) + '-' + m
            ymItem.days = []
            let monthDayLen = utils.getMonthDays(startYear + i, j)
            if(nowYear == startYear + i && nowMonth == j) {
              monthDayLen = nowDay
            }
            for(let k = 1;k <= monthDayLen;k++) {
              let d = k >= 10 ? k + '' : '0' + k
              let dayItem = {}
              dayItem.day = d
              dayItem.dayText = d + '日'
              ymItem.days.push(dayItem)
            }
            this.tableTitleList.yearMonthDays.push(ymItem)
          }
          this.tableTitleList.yearMonths.push(yearItem)

          let weekNums = utils.getWeekNumber(startYear + i, 12, 31)
          for(let j = 1; j <= weekNums; j++) {
            let w = j >= 10 ? j + '' : '0' + j
            let weekItem = {}
            weekItem.week = w
            weekItem.weekText = '第' + w + '周'
            ywItem.week.push(weekItem)

          }
          this.tableTitleList.yearWeeks.push(ywItem)
        }else if(i > 0 && i === dYear) {
          for(let j = 1; j <= endMonth ;j++) {
            let m = j >= 10 ? j + '' : '0' + j
            let monthItem = {}
            monthItem.month = m
            monthItem.monthText = m + '月'
            yearItem.month.push(monthItem)

            let ymItem = {}
            ymItem.yearMonth = (startYear + i) + '-' + m
            ymItem.days = []
            let monthDayLen = utils.getMonthDays(startYear + i, j)
            if(nowYear == startYear + i && nowMonth == j) {
              monthDayLen = nowDay
            }
            for(let k = 1;k <= monthDayLen;k++) {
              let d = k >= 10 ? k + '' : '0' + k
              let dayItem = {}
              dayItem.day = d
              dayItem.dayText = d + '日'
              ymItem.days.push(dayItem)
            }
            this.tableTitleList.yearMonthDays.push(ymItem)
          }
          this.tableTitleList.yearMonths.push(yearItem)

          for(let j = 1; j <= endWeek; j++) {
            let w = j >= 10 ? j + '' : '0' + j
            let weekItem = {}
            weekItem.week = w
            weekItem.weekText = '第' + w + '周'
            ywItem.week.push(weekItem)
          }
          this.tableTitleList.yearWeeks.push(ywItem)
        }

      }
      this.getAverBottomDatas(() => {
        if(this.tableDataType === 'charts') {
          this.$nextTick(() => {
            this.drawMeanChart()
          })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.reportMeanStatistical{
  background-color: #EAECF0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 8px 0 8px 12px;
  // overflow-y: scroll;
  .reportMeanStatistical_treeBg {
    height: 100%;
    background-color: white;
    border-radius: 6px;
    margin-right: 12px;
  }
  .reportMeanStatistical_infoBg {
    height: 100%;
    box-sizing: border-box;
    flex: 1;
    padding-right: 12px;
    overflow-x: scroll;
    .reportMeanStatistical_info {
      width: 100%;
      min-height: 100%;
      flex: 1;
      box-sizing: border-box;
      background-color: white;
      border-radius: 6px;
      padding: 24px 24px 12px;
      min-width: 1320px;
      // padding: 15px;
      .reportMeanStatistical_summaryBg {
        width: 100%;
        display: flex;
        border: 1px solid #e4e7ed;
        border-right: none;
        min-height: 126px;
        margin-bottom: 16px;
        .reportMeanStatistical_summaryTitleArea{
          width: 108px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #e4e7ed;
          .reportMeanStatistical_summaryTitle{
            color: black;
            font-weight: bold;
            font-size: 28px;
          }
          .reportMeanStatistical_summarySubtitle {
            color: #606266;
            font-size: 15px;
          }
        }
        .reportMeanStatistical_summaryValidDataArea {
          width: 105px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #e4e7ed;
          .reportMeanStatistical_summaryValidDataTitle {
            font-size: 16px;
            color: #606266;
            height: 35px;
            line-height: 35px;
          }
          .reportMeanStatistical_summaryValidData {
            .reportMeanStatistical_summaryValidDataValue {
              font-size: 21px;
              color: black;
              font-weight: bold;
            }
            .reportMeanStatistical_summaryValidDataUnit {
              font-size: 16px;
              color: #606266;
            }
          }
        }
        .reportMeanStatistical_summaryParamArea {
          flex: 1;
          padding-top: 16px;
          box-sizing: border-box;
          .reportMeanStatisticalSummary_paramItemBg {
            float: left;
            height: 40px;
            display: flex;
            width: 190px;
            border-radius: 40px;
            border: 1px solid #e4e7ed;
            margin-left: 12px;
            margin-bottom: 16px;
            box-sizing: border-box;
            padding: 6px 0;
            .reportMeanStatisticalSummaryParam_name {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 15px;
              color: #606266;
              border-right: 1px solid #e4e7ed;
            }
            .reportMeanStatisticalSummaryParam_value {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 13px;
              color: #666;
            }
          }
        }
        .reportMeanStatistical_summaryParamOpenArea {
          width: 40px;
          border-right: 1px solid #e4e7ed;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .reportMeanStatistical_summaryParamOpenIcon {
            font-size: 16px;
            color: #606266;
          }
          .reportMeanStatistical_summaryParamOpenText {
            color: #606266;
            font-size: 12px;
          }
        }
      }
      .reportMeanStatistical_searchArea {
        width: 100%;
        height: 64px;
        box-sizing: border-box;
        padding: 12px 24px;
        margin-bottom: 4px;
        .reportMeanStatisticalSearch_half {
          width: 50%;
          float: left;
          height: 100%;
          .reportMeanStatisticalSearch_title {
            font-size: 20px;
            line-height: 40px;
            float: left;
            margin-right: 12px;
          }
          .reportMeanStatisticalSearch_conditionBg {
            width: 345px;
            float: right;
            height: 100%;
            border: 1px solid #e4e7ed;
            border-right: none;
            .reportMeanStatisticalSearch_conditionItem {
              width: 115px;
              height: 100%;
              float: left;
              box-sizing: border-box;
              border-right: 1px solid #e4e7ed;
              line-height: 40px;
              font-size: 16px;
              text-align: center;
              cursor: pointer;
            }
            .conditionOnChoose {
              color: white;
              background: linear-gradient(90deg,#409eff, #40c7ff);
              cursor: unset;
            }
          }
        }
      }
      .reportMeanStatistical_tableTitleArea {
        width: 100%;
        height: 64px;
        border: 1px solid #EBEEF5;
        border-bottom: none;
        box-sizing: border-box;
        padding: 0 24px;
        .reportMeanStatistical_tableTitle {
          width: 50%;
          float: left;
          height: 100%;
          line-height: 64px;
          font-size: 18px;
          color: black;
        }
        .reportMeanStatistical_tableBtnGroup {
          width: 50%;
          float: left;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .reportMeanStatistical_conditionBg {
            width: 109px;
            height: 40px;
            border: 1px solid #e4e7ed;
            border-right: none;
            margin-right: 12px;
            .reportMeanStatistical_conditionItem {
              width: 54px;
              height: 100%;
              float: left;
              box-sizing: border-box;
              border-right: 1px solid #e4e7ed;
              line-height: 40px;
              font-size: 16px;
              text-align: center;
              cursor: pointer;
            }
            .conditionOnChoose {
              color: white;
              background: linear-gradient(90deg,#409eff, #40c7ff);
              cursor: unset;
            }
          }
        }
      }
      .tableHeader {
        background: white;
        color: black
      }
      .reportMeanStatistical_chartsArea {
        width: 100%;
        min-height: 100%;
        border: 1px solid #e4e7ed;
        border-top: none;
        box-sizing: border-box;
        .reportMeanStatistical_charts {
          width: 100%;
          height: 450px;
        }
      }
    }
  }
}
</style>
